<template>
    <div>
        <header>
            <van-nav-bar title="影院">
                <template #left>
                    <div @click="handleChange">
                        {{ cityStore.cityName }}
                        <van-icon name="arrow-down" size="14" color="#000" />
                    </div>
                </template>
                <template #right>
                    <van-icon name="search" size="22" color="#000" />
                </template>
            </van-nav-bar>

            <van-dropdown-menu active-color="#ee0a24">
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2" />
                <van-dropdown-item v-model="value3" :options="option3" />
            </van-dropdown-menu>

            
        </header>
        <section>
            <ul>
                <li v-for="data in store.filterCinemaList(type)" :key="data.cinemaId">
                    {{ data.name }}
                </li>
            </ul>

        </section>



    </div>
</template>

<script setup>
import { NavBar as vanNavBar, Icon as vanIcon, DropdownMenu as vanDropdownMenu, DropdownItem as vanDropdownItem, Cell as vanCell, Button as vanButton, Switch as vanSwitch } from 'vant';
import { onMounted, ref } from 'vue'
import useCinemaStore from '../store/cinemaStore'
import useCityStore from '../store/cityStore'
// import router from '../router';
import { useRouter } from 'vue-router'

const router = useRouter()

const store = useCinemaStore()
const cityStore = useCityStore()
const type = ref(1)

const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('a');
const option1 = [
    { text: '全城', value: 0 },
    { text: '西城区', value: 1 },
    { text: '东城区', value: 2 },
    { text: '海淀区', value: 3 },
    { text: '朝阳区', value: 4 },
    { text: '丰田区', value: 5 },
];
const option2 = [
    { text: 'App订票', value: 'a' },
    { text: '前台兑换', value: 'b' },
];
const option3 = [
    { text: '最近去过', value: 'a' },
    { text: '离我最近', value: 'b' },
];


onMounted(() => {
    console.log(store.getters);
    if (store.cinemaList.length === 0) {
        // 请求数据 dispatch
        store.getCinemaList()

    } else {
        console.log('缓存');
    }
})
const handleChange = () => {
    router.push('./city')
    store.clearCinemaList()
}


</script>


<style scoped lang="scss">
header{
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 100;
}
ul {
    padding-bottom: 10vw;
    & li {
    padding: 10px;
}
}


</style>